Hexo+Github Pages博客搭建

前言

我在2015年的时候,就尝试写博客,当时是在CSDN注册的账号,更新了几篇之后,由于懒,就没再更新了。现在连账号都找不到了,囧。最近突发奇想,觉得搞一个博客,积累一下平时学习的知识,也蛮好的。于是就有了这篇博客,分享一下我的搭建个人博客的经历。

方案选择

网上有各种各样的搭建个人博客的方式,最初我是选则GitHub Pages + Jekyll的方案,后来搜了一下Jekyll的主题,感觉不是很美丽(如想使用Jekyll可以参考一步步在GitHub上创建博客主页 。最终选择了Hexo + GitHub Pages的方案,而且不需要购买域名,可以说是零成本。

关于GitHub Pages

GitHub Pages 是GitHub推出的一个服务,非常适合搭建博客。主要考虑以下几个优点:

  • 提供300M免费存储空间(相当于一个免费的服务器,而且是没有流量限制)
  • 提供域名usernmae.github.io(免费的域名,不足之处就是可能国内访问速度不怎么快)
  • 有Hexo和Jekyll等博客框架的支持(有很多热心的开发者贡献了较多的主题,可以随意挑选)

If you create a repository named you.github.com, where you is your username, and push content to it, we’ll automatically publish that to http://you.github.com. No FTP, no scp, no rsync, nothing. Just a simple git push and you’re done. You can put anything here you like. Use it as a customizable home for your Git repos. Create a blog and spread your ideas. Whatever you want!

GitHub Pages也非常乐意,大家在上面搭建博客。

首先,你要有一个GitHub的账户,建立一个yourusername.github.io的仓库,这个操作对经常使用GitHub的人来说不算难事,这里不详细介绍了,如果不会的话可以百度或者参考这里。创建完成后,就可以进行下一步了。

Hexo搭建

Hexo环境搭建,会依赖较多的工具。安装的过程也会出现各种各样的错误,根据错误在网上搜一下,见招拆招,基本能顺利解决问题。

安装RVM和Ruby

RVM 是一个命令行工具,可以提供一个便捷的多版本 Ruby 环境的管理和切换

1
2
3
$ \curl -sSL https://get.rvm.io | bash -s stable
$ source ~/.bashrc
$ source ~/.bash_profile

列出已知的 Ruby 版本

1
rvm list known

安装一个 Ruby 版本

1
rvm install 2.2.0 --disable-binary

这里安装了最新的 2.2.0, rvm list known 列表里面的都可以拿来安装。

切换 Ruby 版本

1
rvm use 2.2.0

如果想设置为默认版本,这样一来以后新打开的控制台默认的 Ruby 就是这个版本

1
rvm use 2.2.0 --default

查询已经安装的ruby

1
rvm list

卸载一个已安装版本

1
rvm remove 1.8.7

RVM的安装主要是为了控制Ruby的版本,我此次使用的Ruby版本是最新的2.4.1,如果安装遇到困难的可以查看这里

安装Node和npm

在安装Ruby过程中,系统会自动安装Homebrew,因此直接可以用Homebrew来安装Node。

1
brew install node

执行以下命令查看是否安装成功

1
2
node -v
npm -v

安装Hexo

Hexo的安装很简单,官方网站给出的安装方式:

1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

这样Hexo的环境已经搭建完成,并且blog这个文件夹就是一个简单的demo。执行过hexo server后就能用浏览器通过http://localhost:4000/来访问自己的博客页了。

撰写博文

新建博文

完成以上步骤之后,可以预览到自己的博客效果了,接下来我比较关心的是如何新建文章。新建文章有个要注意的地方是,不能直接把普通.md拖进_post目录下,是会报错的。

1
hexo new hello-test    # 格式是: hexo new {文章名}

需要通过命令来创建新的文章,打开新建的hello-test.md

测试图片

在blog的根目录下,_config.yml文件比较重要,主要是对Hexo的配置以及站点的相关配置。

博文图片

关于博文图片,网上很多例子都是推荐七牛云,通过贴链接的方式,把图片加在博文中。我这里推荐将图片放在本地。

1 把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true

2 在你的hexo目录下执行这样一句话npm install hexo-asset-image --save,这是下载安装一个可以上传本地图片的插件,来自dalao:dalao的git

3 等待一小段时间后,再运行hexo n "xxxx"来生成md博文时,/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹

4 最后在xxxx.md中想引入图片时,先把图片复制到xxxx这个文件夹中,然后只需要在xxxx.md中按照markdown的格式引入图片:

![你想输入的替代文字](xxxx/图片名.jpg)

注意: xxxx是这个md文件的名字,也是同名文件夹的名字。只需要有文件夹名字即可,不需要有什么绝对路径。你想引入的图片就只需要放入xxxx这个文件夹内就好了,很像引用相对路径。

最后自己验证一下能否正确加载即可。

更换主题

Hexo的主题相当于是博客的模板,在Hexo官网的Themes中,找到很多模板,可以选择喜欢的进行fork。有些还有中文文档,对英文不是很好的人(比如我)来说很友好。

我这边使用的是tutuge博客应用的Hexo主题raytaylorism。主题配置是中文文档,非常简单,大家按照步骤基本可以配置完成。

远程部署

在之前,已经建立了一个yourusername.github.io的仓库了,接下来要通过远程部署来完成用https://yourusername.github.io 直接访问你的博客。

现在我们需要_config.yml文件,来建立关联,命令:

1
vim _config.yml

翻到最下面,改成我这样子的

1
2
3
4
5
6
7
deploy:

type: git

repo: https://github.com/yourusername.github.io/yourusername.github.io.github.io.git

branch: master

然后执行命令:

1
hexo d -g

就可以把自己的博客部署到GitHub Pages了,这个操作是有延迟的,一般要等几分钟才能通过https://yourusername.github.io访问查看到效果,不能太心急。

如果配置过程中遇到SSH Key的问题,请参考网上的教程

自己的博客源码,可以再建一个Github仓库用来管理,yourusername.github.io只能用来部署自己的博客。

总结

使用Hexo + GitHub Pages搭建个人博客可以说是简单快捷,0成本,本文也没有写的特别详细,一些简单的坑通过搜索还是可以快速解决的。这也是我搭建完个人博客后的第一篇文章,不足之处,希望大家多多指点。

扩展阅读

[1] 一步步在GitHub上创建博客主页

[2]GitHub Pages

[3]Hexo

[4]RVM安装手册

[5]hexo生成博文插入图片

[6]土土哥的技术博客

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器